<template>
  <div id="zqjdApply">
    <div class="homeTitle">债券借贷交易申请</div>
    
    <div class="tableBox">
      <div>
        <div class="tableTitle">申请人信息： </div>
      <el-form class="formlist" :model="formData1"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList1" :key="item.label" :label="item.label" :prop="item.prop">
                    {{formData1[item.prop]}}
                    </el-form-item>
           </el-form>
      </div>
       <div >
         <div class="tableTitle">交易对手： </div>
          <el-form class="formlist" :model="formData2"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList2" :key="item.label" :label="item.label" :prop="item.prop">
                        {{formData2[item.prop] ? formData2[item.prop] : '暂无数据'}}
                    </el-form-item>
           </el-form>
      </div>
   
      
     <div class="tableTitle">成交信息：</div>
            <formList :formData = 'overData' :isdisabled='true' :formList = 'overList' parentClass = 'formll'></formList>
     
        <div class="tableTitle">交易信息：</div>
            <formList :formData = 'formData' @jsDate='jsDate' :isdisabled='true' :formList = 'formList' @clickInput='chooseBond' parentClass = 'formll'></formList>

         <div style="width:98%" class="tableTitle">质押品列表：</div>
        <el-table :data="pledgeData" border style="width: 98%">
          <el-table-column prop="code" label="债券代码"  align="center"></el-table-column>
          <el-table-column prop="fullName" label="债券全称"  align="center"></el-table-column>
          <el-table-column prop="simpleName" label="债券简称"  align="center"></el-table-column>
         
          <el-table-column prop="variety" label="债券品种" align="center"></el-table-column>
          <el-table-column prop="sumMoney" label="质押券面总额(万元)" align="center"></el-table-column>
        </el-table>
     

      
      <el-dialog title="选择下一待办人" class="nextUser" :visible.sync="nextManager" width="30%" center>
        <div v-show="nextManager">
          <!-- <div  class="tableTitle">下一代理人</div> -->
           <el-radio-group v-model="nextUserId">
            <el-radio v-for="item in tableData" :key="item.id"  :label="item.id">
              <span class="user_name">{{item.name}}</span>
              <span class="user_part">{{item.department}}</span>
              </el-radio>
          </el-radio-group>
          
        </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addApply" size="small">确认选中</el-button>
          <el-button @click="cancleNext"  size="small">取 消</el-button>
      </span>
      </el-dialog>
       <div class="riskTip" style="width:98%">
        <div class="fxtq tableTitle">申请原由：</div>
        <div class="fxcon">
          <p>{{reason}}</p>
        </div>
      </div>
      <div class="btn">
<el-button type="primary"  size="small" v-show="this.$route.query.view != 'view'"  @click="submitPost">{{btntext}}</el-button>
        <el-button type="primary"  size="small" v-show="this.$route.query.currentRole != '交易员' && this.$route.query.view != 'view'"  @click="nopass">审核不通过</el-button>
        <el-button type="primary"  @click="goback" size="small">取消</el-button>
      </div>

       
    </div>
  </div>
</template>

<script>
export default {
  name: "accountDetail",
  data() {
    return {
      nextManager: false,
      tableData: [],
      nextUserId: '',
      step: 1,
      isAuthorization: 2,
      btntext: '审核通过',
      rules:{

      },
      reason:'',
      tishiMessage:'',
      formList1: [
        {label: '机构编号', prop: 'bankNo', value:''},{label: '机构名称', prop: 'bank', value:''},
        {label: '操作员工号', prop: 'jobNum', value:''},{label: '操作员姓名', prop: 'name', value:''},
      ],
      formData1: {},
      formList2: [
        {label: '交易对手', prop: 'cFull', value:''},{label: '交易机构类型', prop: 'cType', value:''},
        {label: '业务类型', prop: 'caType', value:''},{label: '开户行', prop: 'openBank', value:''},
        {label: '账户名称', prop: 'accountName', value:''},{label: '账号', prop: 'number', value:''},
        {label: '支付系统行号', prop: 'payment', value:''},{label: '托管机构', prop: 'trusteeship', value:''},
        {label: '托管账户名称', prop: 'trusteeshipAccountName', value:''},{label: '托管账号', prop: 'managedAccount', value:''},
      ],
      formData2: {},
      overList:[
          {label : '借贷方向', value:'hhh', prop:'direction', select: true,
        options: [
            {label: '融入', value: '融入'},
            {label: '融出', value: '融出'}
           
        ]},
        {label : '清算速度', value:'hhh', prop:'clearSpeed', select: true,
         options: [
            {label: 'T+0', value: 'T+0'},
            {label: 'T+1', value: 'T+1'}  
        ]},
        
      ],
      overData:{},
      formData:{
        
        code: '',
        firstWay: '券券兑付',
        endWay: '券费兑付',
      },
      formList: [
        {label : '标的债券代码', prop:'code', input: true},
        {label : '标的债券名称', value:'hhh',  prop:'bondName', input: true},
        {label : '质押债券置换安排', value:'', prop:'position', select: true,
         options: [
            {label: '是', value: '是'},
            {label: '否', value: '否'}
        ]},
        {label : '借贷期限(天)', value:'', prop:'days',input: true},
        {label : '标的债券券面总额（万元）', value:'', prop:'totalFace',input: true},
        {label : '计息基础', value:'', prop:'basicRate', select: true,
         options: [
            {label: 'A/A', value: 'A/A'},
            {label: 'A/360', value: 'A/360'},
            {label: 'A/365', value: 'A/365'}
        ]},
        {label : '借贷费率（%）', value:'', prop:'loanRate',input: true}, 
        {label : '借贷费用(元)', value:'', prop:'loanCost',input: true}, 
        {label : '争议解决方式', value:'', prop:'disputeWay', select: true,
         options: [
            {label: '诉讼', value: '诉讼'},
            {label: '仲裁', value: '仲裁'},
            {label: '调解', value: '调解'}
        ]},
       {label : '交易品种', value:'', prop:'tradingVarieties', select: true,
         options: [
            {label: 'L001', value: 'L001'},{label: 'L007', value: 'L007'},
            {label: 'L014', value: 'L014'},{label: 'L021', value: 'L021'},
            {label: 'L1M', value: 'L1M'},{label: 'L2M', value: 'L2M'},
            {label: 'L3M', value: 'L3M'},{label: 'L4M', value: 'L4M'},
            {label: 'L5M', value: 'L5M'},{label: 'L6M', value: 'L6M'},
            {label: 'L9M', value: 'L9M'},{label: 'L1Y', value: 'L1Y'}
        ]},
        {label : '首次结算日', value:'',  prop:'firstTime',date: true},
        {label : '到期结算日', value:'', prop:'endTime',date: true},
        {label : '实际占券天数(天)', value:'hhh', prop:'occupyDays', input: true},
        {label : '首次结算方式', value:'hhh', prop:'firstWay',disabled: true, input: true},
        {label : '到期结算方式', value:'hhh', prop:'endWay', disabled: true, input: true},
       
      ],
      pledgeData: [],
      flowState: '',
      nextRole: '',
      warns: ''
    };
  },
  created() {
  },
  methods: {
    storage() {
      this.formData2.caId = sessionStorage.getItem('counterpartyAccountId')
        let obj = {
          counter: this.formData2,
          bond: this.formData3,
          bondApply: this.formData,
          user: this.formData1,
          selectedData: this.selectedData
        }
        let param = {
        model: '债券交易',
        counterparty: this.formData2.cFull,
        applyMessage: JSON.stringify(obj)
      //  applyMessage: Object.assign(this.formData1, this.formData2, this.formData3, this.formData)
      }
      this.axios.post('/applyTemporary/addOrUpdate', param).then(res => {
        this.$message({
          type: 'success',
          message: '暂存成功'
        })
        this.$router.push('transaction')
      })
    },
    goback() {
      this.clearSession()
      this.$router.go(-1)
      
    },
      nopass() { 
          this.$prompt('请输入驳回原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
    
        }).then( value => {
          
          // 审核不通过
            if(this.step == 1 ){
              this.nextUserId = null
            }
              
              let data = {
              flowId: parseInt(this.$route.query.flowId),
              userId: this.formData.userId,
              flowState: this.flowState,
              nextUserId: this.nextUserId,
              nextRole: this.nextRole,
              state: 2,
              content: value.value
            }
            this.axios.post('bondApplyFlow/approval', data).then(res => {
              if(res.data.code ==200 ){
                this.$message({
                  type: 'success',
                  message: '驳回成功'
                })
                this.$router.go(-1)
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    cancleNext() {
      this.nextManager = false;
    },
   
    getStorageDetail() {
      // 暂存详情
      let param = {
        id: this.$route.query.id
      }
      this.axios.get('applyTemporary/selectById', {
        params: param
      }).then(res => {
          //let {this.formData2} = res.data.data
          let {user, counter, bond, bondApply, selectedData} = res.data.data
       
       //  this.formData1 = this.user
         this.formData2 = counter 
         this.formData3 = bond
         this.formData = bondApply
        sessionStorage.setItem('counterpartyAccountId', this.formData2.caId)
        sessionStorage.setItem('counterpartyId', this.formData2.cid)
        sessionStorage.setItem('bondId', this.formData3.id)
     
        //  this.selectedData = selectedData
      })
    },

    submitPost() {
              this.getNextUser()       
    },
     // 计算天数
    jsDate(val) {
      if(this.formData.endTime != undefined) {
            let date = new Date(this.formData.endTime)/1000  - new Date(this.formData.firstTime)/1000
            let days = date / 86400
            if(days < 0) {
              this.$message({
                type: 'warning',
                message: '到期结算日不得早于首次结算日'
              })
              return
            }
            this.formData.realdays = days
      }
    },
  
    addApply() {
      
        //获取下一办理人成功
          // 提交下一审批人审核
         let data = {
            flowId: parseInt(this.$route.query.flowId),
            userId: this.formData.userId,
            flowState: this.flowState,
            nextUserId: this.nextUserId,
            nextRole: this.nextRole,
            state: 1,
            content: '通过'
          }
          this.axios.post('bondApplyFlow/approval', data).then(res => {
            if(res.data.code ==200 ){
              this.$message({
                type: 'success',
                message: '提交成功'
              })
              this.$router.go(-1)
            }
          })
       
    },
  
 getNextUser() {
      let data = {
        roleName: this.$route.query.currentRole,
        flowId: this.$route.query.flowId
      }
      this.axios.get('boanLoanApply/getNextUser', {params: data}).then(res => {
        let response = res.data.data
        debugger
        this.nextManager = true;
        if(response.flowState == '1' || response.flowState == 1) {
            this.$message({
              type: 'warning',
              message: '提交下一办理人'
            })
            this.flowState = response.flowState
            this.nextRole  = response.nextRole
            this.nextManager = true
            this.tableData = response.nextUser
        }else {
             this.flowState = response.flowState
            if(response.nextRole != undefined || response.nextRole != null){
            
               this.nextRole  = response.nextRole
              this.nextUserId = response.nextUser[0].id
            }else {
              this.nextRole = null
              this.nextUserId = null
            }
           
          //  this.step = 2
             this.addApply()
        }
      })
    },
    getOppoAccountInfo(val) {
      //交易对手账户信息
      let param = {
        caId: val
      }
      this.axios.get('counterparty/selectByCid', {params: param}).then((res) => {
        
        this.formData2 = res.data.data
      })
    },
      getBoundInfo(val) {
      this.axios.get('bond/selectOneById', {params: {
        id: val
      }}).then((res) => {
        this.formData.code = res.data.data.bond.code
      })
    },
    getPleList(val) {
      // 获取质押品
      let param = {
        ids: val
      }
      let totalMoney = 0;
      this.axios.get('pledge/selectById', {params: param}).then((res => {
        this.pledgeData = res.data.data
      }))
    },
    close() {
      this.$router.go(-1);
    },
    chooseBond() {
       if(this.overData.direction == '' || this.overData.direction == undefined) {
          this.$message({
            type: 'warning',
            message: '请选择借贷方向'
          })
        } else {
          sessionStorage.setItem('overdata', JSON.stringify(this.overData))
          this.$router.push({path: 'chooseBond', query: {mode: this.overData.direction}});
        }
    },
    selectAginst(){
      this.$router.push('chooseOpponent')
    },
    clearSession() {
      
    },
    getApplyDetail() {
      let param = {
        id: this.$route.query.applyId
      }
      this.axios.get('boanLoanApply/getById', {params: param}).then(res => {
        let data = res.data.data
        this.formData =  data
        this.overData = data
        this.reason = data.reason
        this.formData.code = data.bond.code
        this.getBoundInfo(data.bondId)
        this.getOppoAccountInfo(data.counterpartyAccountId)
        this.getPleList(data.pledgeId)
      })
    }
  },
  mounted() {
    //申请人信息
    this.formData1 = JSON.parse(sessionStorage.getItem('user'))
  },
  created() {
    this.getApplyDetail()
  }
};
</script>

<style lang="scss">
#zqjdApply {
.el-dialog{
  background: white
}
 .addProduct{
         border: 1px solid white;
    border-top: 0;
    height: 50px;
    line-height: 50px;
    padding-left: 50px;
    background: white;
 }
  .tableBox {
    padding-top: 10;
    color: white;
    .formlist{
      .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            box-sizing: border-box;
            background: rgba(53,58,58,0.8);
            color:white;
        }
        .el-form-item__content{
          width:55%;
          text-align: center;
          box-sizing: border-box;
          background: rgba(53,58,58,0.55);
          
        }
      }
    }
    .el-table__empty-text{
      color:white;
    }
    .tableTitle {
      line-height: 36px;
      padding-left: 20px;
      margin: 12px 0;
    }
    table {
      
      border: 1px solid white;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
       .el-table tr{
          background: transparent;
      }
      // margin-bottom: 20px;
      tr {
        td {
          
          &:nth-child(odd) {
            background: rgba(53, 58, 58, 0.55);
          }
          &:nth-child(even) {
            background: rgba(53, 58, 58, 0.55);
          }
        }
      }
    }
    .riskTip {
      .fxtq {
        margin-bottom: 20px;
      }
      .fxcon {
        border: 1px solid white;
        background-color: #4d534e;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-top:20px;
    }
  }
  .DiaFxcon {
    background-color: white;
    padding: 20px 10px;
    margin-bottom: 20px;
  }
  .el-radio-group{
    width:100%;
    height: 320px;
    overflow-y: scroll;
    .el-radio{
      margin-bottom: 15px;
      width: 100%;
      display: block;
       .el-radio__label {
        width: 80%;
        display: inline-block;
          
        .user_name, .user_part {
              padding: 15px;
              width: 48%;
              display: inline-block;
              text-align: center;
              border: 1px solid #efefef
            }
      }  
     
    }
     .el-radio+.el-radio{
        margin-left: 0
      }
  }
  
 
}
</style>
